<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%
		String path = request.getContextPath();
		String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
	%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%request.setCharacterEncoding("utf-8"); %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>管理员新增</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
	<!--bootstrap.min.css-->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <!--font-awesome.css?v=4.4.0-->
    <link href="https://cdn.staticfile.org/font-awesome/4.4.0/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <!--iCheck/custom.css-->
    <link rel="stylesheet" type="text/css" href="<%=basePath%>css/plugins/iCheck/custom.css"/>
    <!--bootstrap.min.css-->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <!--style.css-->
    <link rel="stylesheet" type="text/css" href="<%=basePath%>css/style.css"/>
    <!--jquery.min.js-->
	<script src="https://cdn.staticfile.org/jquery/2.1.4/jquery.min.js"></script>	
    <style type="text/css">
    	.cuowu{
    		margin: 0;
    	}
    </style>
</head>
<body class="gray-bg">
				<div class="ibox-content">
					<form method="post" action="${pageContext.request.contextPath}/BackstageRoleServlet/addAdmin" class="form-horizontal" id="addRole">
						<div class="row" style="border: 1px solid rgba(0,0,0,0);">
							<div style="width: 400px;float: left;margin-left: 30px;" id="form-group">
								<div class="input-group m-b cuowu" id="account"><span class="input-group-addon" style="background-color: #3F9CDD;color: white;">账号</span>
									<div class="has-warning">
										<input type="text"  id="admin_account" name="admin_account" class="form-control cuowu" style="height: 36px;">
									</div>
								</div>
								
								<div id="admin_zhanghao" style="height:15px;">
								</div>
							</div>
							
							<div style="width: 400px;float: left;margin-left: 20px;" id="form-group">
								<div class="input-group m-b cuowu" id="aname"><span class="input-group-addon" style="background-color: #3F9CDD;color: white">姓名</span>
									<div class="has-warning">
										<input type="text" id="admin_name" name="admin_name" class="form-control cuowu" style="height: 36px;">
									</div>
								</div>
								<div id="admin_aname" style="height: 15px;"></div>
							</div>
						</div>
						
				
							
						<div class="row" style="border: 1px solid rgba(0,0,0,0);" >
							<div style="width: 400px;float: left;margin-left: 30px;" id="form-group">
								<div class="input-group m-b cuowu" id="apwd"><span class="input-group-addon" style="background-color: #3F9CDD;color: white">密码</span>
									<div class="has-warning">
										<input type="text"  id="admin_pwd" name="admin_pwd" class="form-control cuowu" style="height: 36px;">
									</div>
								</div>
								<div id="admin_apwd" style="height: 15px;"></div>
							</div>
							
							<div style="width: 400px;float: left;margin-left: 20px;" id="form-group">
								<div class="input-group m-b cuowu" id="acreate"><span class="input-group-addon" style="background-color: #3F9CDD;color: white">创建人</span>
									<div class="has-warning">
										<input type="text" id="admin_create" readonly value="${admin.admin_name}" name="admin_create" class="form-control  cuowu" style="height: 36px;">
									</div>
								</div>
								<div id="admin_acreate" style="height: 15px;"></div>
							</div>
						</div>
							
							
					
						
						<div class="row" style="border: 1px solid rgba(0,0,0,0);">
							<div style="width: 400px;float: left;margin-left: 30px;">
								<div class="input-group m-b cuowu"><span class="input-group-addon" style="background-color: #3F9CDD;color: white">角&nbsp;色</span>
									<div class="has-warning">
											<select name="role_id" class="form-control" id="role">
											</select>
									</div>
								</div>
								<div id="admin_role" style="height: 15px;"></div>
							</div>
							
							
						<div class="form-group">
							<div class="col-md-2" style="background-color: #3F9CDD;width: 56px;height: 36px;color: white;text-align: center;line-height: 36px;font-size: 16px;margin-top: 0px;float: left;margin-left: 20px;">
								状&nbsp;态&nbsp;&nbsp;
							</div>
							&nbsp;&nbsp;&nbsp;&nbsp;
							<div class="col-md-10" style="margin-top: 0px;float: left;margin-left: 30px;">
								<div class="radio i-checks">
									<label>
                                        <input type="radio" value="1" name="state_id" checked="checked">
                                        <i></i> 启用
                                    </label>
                                    &nbsp;&nbsp;&nbsp;
                                    <label>
                                        <input type="radio" value="2" name="state_id">
                                        <i></i>禁止
                                    </label>
								</div>
							</div>
						</div>
						</div>
					
						<input type="button" id="xinzeng" class="btn btn-info pull-right" value="新增" />
						
					</form>
				</div>

<!--bootstrap.min.js-->
<script src="https://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!--content.js-->
<script src="<%=basePath%>js/content.js" type="text/javascript" charset="utf-8"></script>
<!--icheck.min.js-->
<script src="<%=basePath%>js/plugins/iCheck/icheck.min.js" type="text/javascript" charset="utf-8"></script>
<!--jquery.validate.min.js-->
<script src="<%=basePath%>js/plugins/validate/jquery.validate.min.js" type="text/javascript" charset="utf-8"></script>
<!--messages_zh.min.js-->
<script src="<%=basePath%>js/plugins/validate/messages_zh.min.js" type="text/javascript" charset="utf-8"></script>
<!-- laydate.js -->
<script src="<%=basePath%>js/plugins/layer/laydate/laydate.js" type="text/javascript" charset="utf-8"></script> 

<script>
		//账号验证
		$('#admin_account').focus(function(){
			$('#zhanghao').remove();
			if($('#admin_account').val()==''){
				$('#admin_zhanghao').html("<span  id='zhanghao' style='margin-top:-20px;margin-left:55px;color:gray;'><i style='color:gray;' class='fa fa fa-info-circle'></i>请输入管理员账号</span>");
			}
		});
		$('#admin_account').blur(function(){
			$('#zhanghao').remove();
			if($('#admin_account').val()==''){
				$('#admin_zhanghao').html("<span  id='zhanghao' style='margin-top:-20px;margin-left:55px;color:red;'><i style='color:red;' class='fa fa-times-circle'></i>管理员账号不能为空</span>");
			}else if( !(/^[a-zA-Z][a-zA-Z0-9_]{4,15}$/.test($('#admin_account').val())) ){
				$('#zhanghao').remove();
				$('#admin_zhanghao').html("<span  id='zhanghao' style='margin-top:-20px;margin-left:55px;color:red;'><i style='color:red;' class='fa fa-times-circle'></i>账号不合法(字母开头,允许5-16 位,允许字母数字下划线)</span>");
				$('#admin_account').css("border","1px solid red");
			}else{
				$.get('${pageContext.request.contextPath}/BackstageRoleServlet/accountYanZheng',{"admin_account":$('#admin_account').val()},function(data){
					if(data==1){
						$('#zhanghao').remove();
						$('#admin_zhanghao').html("<span  id='zhanghao' style='margin-top:-20px;margin-left:55px;color:red;'><i style='color:red;' class='fa fa-times-circle'></i>该账号已存在</span>");
						$('#admin_account').css("border","1px solid red");
					}
					else{
						$('#zhanghao').remove();
						$('#admin_zhanghao').html("<span  id='zhanghao' style='margin-top:-20px;margin-left:55px;color:green;'><i style='color:green;' class='fa fa-check'></i></span>");
					}
				});
			}
		});
		//姓名验证
		$('#admin_name').focus(function(){
			$('#xingming').remove();
			if($('#admin_name').val()==''){
				$('#admin_aname').html("<span  id='xingming' style='margin-top:-20px;margin-left:55px;color:gray;'><i style='color:gray;' class='fa fa-info-circle'></i>请输入管理员姓名</span>");
			}
		});
		$('#admin_name').blur(function(){
			$('#xingming').remove();
			if($('#admin_name').val()==''){
				$('#admin_aname').html("<span  id='xingming' style='margin-top:-20px;margin-left:55px;color:red;'><i style='color:red;' class='fa fa-times-circle'></i>姓名不能为空</span>");
			}else{
				$('#xingming').remove();
				$('#admin_aname').html("<span  id='xingming' style='margin-top:-20px;margin-left:55px;color:green;'><i style='color:green;' class='fa fa-check'></i></span>");
			}
		});
		//密码验证
		$('#admin_pwd').focus(function(){
			$('#mima').remove();
			if($('#admin_pwd').val()==''){
				$('#admin_apwd').html("<span  id='mima' style='margin-top:-20px;margin-left:55px;color:gray;'><i style='color:gray;' class='fa fa-info-circle'></i>请输入密码</span>");
			}
		});
		$('#admin_pwd').blur(function(){
			$('#mima').remove();
			if($('#admin_pwd').val()==''){
				$('#admin_apwd').html("<span  id='mima' style='margin-top:-20px;margin-left:55px;color:red;'><i style='color:red;' class='fa fa-times-circle'></i>密码不能为空</span>");
			}else if($('#admin_pwd').val().length<6&&$('#admin_pwd').val().length>=1){
				$('#mima').remove();
				$('#admin_apwd').html("<span  id='mima' style='margin-top:-20px;margin-left:55px;color:red;'><i style='color:red;' class='fa fa-times-circle'></i>密码长度最少6位</span>");
			}else if($('#admin_pwd').val().length>16){
				$('#mima').remove();
				$('#admin_apwd').html("<span  id='mima' style='margin-top:-20px;margin-left:55px;color:red;'><i style='color:red;' class='fa fa-times-circle'></i>密码长度最大16位</span>");
			}else {
				$('#mima').remove();
				$('#admin_apwd').html("<span  id='mima' style='margin-top:-20px;margin-left:55px;color:green;'><i style='color:green;' class='fa fa-check'></i></span>");
			}
		});
		//选择角色验证
		$('#role').blur(function(){
			$('#juese').remove();
			if($('#role').val()==''){
				$('#admin_role').html("<span  id='juese' style='margin-top:-20px;margin-left:55px;color:red;'><i style='color:red;' class='fa fa-times-circle'></i>请选择角色</span>");
			}
		});
	
</script>
<script>
//提交表单前进行表单验证并关闭当前弹出层
	$('#xinzeng').click(function(){
		//提交表单前检查表单验证是否全部通过
		var r = true;
		if($('#admin_account').val()==''){
			$('#zhanghao').remove();
			$('#admin_zhanghao').html("<span  id='zhanghao' style='margin-top:-20px;margin-left:55px;color:red;'><i style='color:red;' class='fa fa-times-circle'></i>管理员账号不能为空</span>");
			r = false;
		}
		if($('#admin_name').val()==''){
			$('#xingming').remove();
			$('#admin_aname').html("<span  id='xingming' style='margin-top:-20px;margin-left:55px;color:red;'><i style='color:red;' class='fa fa-times-circle'></i>姓名不能为空</span>");
			r = false;
		}
		if($('#admin_pwd').val()==''){
			$('#mima').remove();
			$('#admin_apwd').html("<span  id='mima' style='margin-top:-20px;margin-left:55px;color:red;'><i style='color:red;' class='fa fa-times-circle'></i>密码不能为空</span>");
			r = false;
		}
		if($('#admin_pwd').val().length>16){
			$('#mima').remove();
			$('#admin_apwd').html("<span  id='mima' style='margin-top:-20px;margin-left:55px;color:red;'><i style='color:red;' class='fa fa-times-circle'></i>密码长度最大16位</span>");
			r = false;
		}
		if($('#admin_pwd').val().length<6&&$('#admin_pwd').val().length>=1){
			$('#mima').remove();
			$('#admin_apwd').html("<span  id='mima' style='margin-top:-20px;margin-left:55px;color:red;'><i style='color:red;' class='fa fa-times-circle'></i>密码长度最少6位</span>");
			r = false;
		}
		if($('#role').val()==''){
			$('#juese').remove();
			$('#admin_role').html("<span  id='juese' style='margin-top:-20px;margin-left:55px;color:red;'><i style='color:red;' class='fa fa-times-circle'></i>请选择角色</span>");
			r = false;
		}
	   if( !(/^[a-zA-Z][a-zA-Z0-9_]{4,15}$/.test($('#admin_account').val())) ){
			$('#zhanghao').remove();
			$('#admin_zhanghao').html("<span  id='zhanghao' style='margin-top:-20px;margin-left:55px;color:red;'><i style='color:red;' class='fa fa-times-circle'></i>账号不合法(字母开头,允许5-16 位,允许字母数字下划线)</span>");
			$('#admin_account').css("border","1px solid red");
			r = false;
		}
	   if($('#zhanghao').text()=='该账号已存在'){
		   r = false;
	   }
		if(r){
			$.post('${pageContext.request.contextPath}/BackstageRoleServlet/addAdmin',{
				"admin_name":$('#admin_name').val(),
				"admin_account":$('#admin_account').val(),
				"admin_pwd":$('#admin_pwd').val(),
				"role_id":$('#role').val(),
				"state_id":$('input:radio:checked').val(),
				"admin_create":$('#admin_create').val()
				},function(data){
				if(data==1){
					 parent.$('#panduan').val(1);
					 parent.layer.closeAll(); 
				}else if(data==2){
					parent.$('#panduan').val(2);
					parent.layer.closeAll();
				}else if(data==0){
					parent.$('#panduan').val(0);
					parent.layer.closeAll();
				}
			});
		}
	});
</script>
<script>
    $(document).ready(function () {
        $(".i-checks").iCheck({checkboxClass: "icheckbox_square-green", radioClass: "iradio_square-green",})
    });
    $(':text').each(function(){
    	$(this).blur(function(){
    		if($(this).val()!=''){
    			$(this).css("border","1px solid #1AB394");
    		}else{
    			if($(this).attr('name')=='user_tuijian'||$(this).attr('name')=='user_email'){
    				$(this).css("border","1px solid #F8AC59");
    			}else{
    				$(this).css("border","1px solid red");
    			}
    			
    			
    		}
    	});
    });
    //ajax动态添加下拉菜单
    $.get('${pageContext.request.contextPath}/BackstageRoleServlet/preAddAdmin',function(data){
    	var role = JSON.parse(data);
    	var ops = "";
    	ops = "<option value=''>请选择</option>";
    	for(var i = 0;i<role.length;i++){
    		if(role[i].role_name=='会员'){
    			continue;
    		}
    		ops += "<option value='"+role[i].role_id+"'>"+role[i].role_name+"</option>";
    	}
    	$('#role').html(ops);
    });
</script>

</body>

</html>
